<template>
	<view class="container-portrait flex-between">
		<view class="lt flex">
			<view class="portrait">
				<image src="@/static/portrait-bgc.png" mode=""></image>
				<view class="portrait-box">
					<image :src="userInfo.avatar" mode="" style="overflow: hidden;border-radius: 50%;"></image>
				</view>
			</view>
			<view class="nickname-box" style="font-size: 22rpx;">
				<view class="">
					{{$t('home.name9')}}：{{userInfo.nickname}}
				</view>
				<view class="" style="font-size: 22rpx;" @click="copy(userInfo.username)">
					{{$t('home.name10')}}：{{userInfo.username}}
				</view>
				<view class="member">
					{{userInfo.levelname}}
				</view>
			</view>
		</view>
		<view class="rt" v-if="right == 1" style="display: none;">
			<view class="person">
				<view class="person-img">
					<image src="@/static/public/person.png" mode=""></image>
					<view class="text">
						{{ userInfo.userflow ? userInfo.userflow.toFixed(2): 0}}
					</view>
				</view>
				<view class="text">
					{{$t('home.name11')}}
				</view>
			</view>
			<view class="network">
				<view class="network-img">
					<image src="@/static/public/network.png" mode=""></image>
					<view class="text">
						{{userInfo.dayflow ? userInfo.dayflow.toFixed(2): 0 }}
					</view>
				</view>
				<view class="text">
					{{$t('home.name12')}}
				</view>
			</view>
		</view>
		<view class="rt" v-if="right == 'set'">
			<view class="" style="margin: 0 20rpx;" @tap="$fun.jump('/pageA/set')">
				<u-icon name="setting" color="#fff" size="26"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
	import uniCopy from '@/components/xb-copy/uni-copy.js'
	export default {
		name: "c-portrait",
		props: {
			right: {
				default: '1'
			}
		},
		data() {
			return {
				userInfo: {},
			};
		},
		async created() {
			await this.$fun.ajax.post('user/index', {}).then(res => {
				if (res.code == 1) {
					this.userInfo = res.data
				}
			})
		},
		onLoad() {

		},
		methods: {
			copy(text) {
				uniCopy({
					content: text,
					success: (res) => {
						uni.showToast({
							title: res,
							icon: 'none'
						})
					},
					error: (e) => {
						uni.showToast({
							title: e,
							icon: 'none',
							duration: 3000,
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		width: 100%;
	}

	.container-portrait {
		width: 100%;
		padding: 20rpx 0;

		.lt {
			.portrait {
				position: relative;
				width: 120rpx;
				height: 120rpx;
				// background-color: #fff;
				border-radius: 50%;

				.portrait-box {
					width: 88rpx;
					height: 88rpx;
					position: absolute;
					left: 50%;
					transform: translate(-50%, -50%);
					top: 50%;
				}
			}

			.nickname-box {
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 38rpx;
				// text-align: center;
				min-width: 168rpx;
				height: 78rpx;
				background: linear-gradient(to left, rgba(255, 255, 255, 0) 20%, rgba(0, 163, 255, .6) 60%, rgba(255, 255, 255, 0) 100%);

				.member {
					margin: 5rpx 0;
					width: 108rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 20rpx;
					color: #232323;
					// line-height: 19rpx;
					background-color: #d4dae2;
					border-radius: 20rpx;
					text-align: center;
				}
			}
		}

		.rt {
			.text {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 18rpx;
				color: #FFFFFF;
				line-height: 21rpx;
				text-align: center;
				margin-top: -10rpx;
			}

			.person {
				display: flex;
				flex-direction: column;
				align-items: flex-end;

				.person-img {
					width: 142rpx;
					height: 66rpx;
					position: relative;

					.text {
						position: absolute;
						top: 50%;
						transform: translateY(-50%);
						left: 10rpx;
						margin: 0;
					}
				}
			}

			.network {
				display: flex;
				flex-direction: column;
				align-items: flex-end;

				.network-img {
					width: 142rpx;
					height: 66rpx;
					position: relative;

					.text {
						position: absolute;
						top: 50%;
						transform: translateY(-50%);
						left: 10rpx;
						margin: 0;
					}
				}
			}
		}
	}
</style>